<!-- 地图控制面板组件 - 简洁版 -->
<template>
  <div class="map-control-panel">
    <!-- 位置信息 -->
    <div class="position-info">
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">经度</span>
          <span class="info-value">{{ currentView.lng.toFixed(4) }}°</span>
        </div>
        <div class="info-item">
          <span class="info-label">纬度</span>
          <span class="info-value">{{ currentView.lat.toFixed(4) }}°</span>
        </div>
        <div class="info-item">
          <span class="info-label">缩放</span>
          <span class="info-value">{{ zoomLevel }}</span>
        </div>
      </div>
    </div>

    <!-- 缩放控制 -->
    <div class="zoom-section">
      <div class="section-title">缩放控制</div>
      <div class="zoom-controls">
        <button class="zoom-btn" @click="zoomOut">-</button>
        <input 
          v-model="currentZoom" 
          type="range" 
          :min="1" 
          :max="20"
          class="zoom-slider"
          @input="handleZoomChange"
        />
        <button class="zoom-btn" @click="zoomIn">+</button>
        <span class="zoom-value">{{ currentZoom }}</span>
      </div>
    </div>

    <!-- 快速定位 -->
    <div class="locations-section">
      <div class="section-title">快速定位</div>
      <div class="location-grid">
        <button 
          v-for="preset in viewPresets" 
          :key="preset.name"
          class="location-btn"
          @click="jumpToPreset(preset)"
        >
          {{ preset.name }}
        </button>
      </div>
    </div>

    <!-- 图层管理 -->
    <div class="layers-section">
      <div class="section-title">图层管理</div>
      <div class="layer-list">
        <div 
          v-for="layer in layers" 
          :key="layer.id"
          class="layer-item"
        >
          <div class="layer-header">
            <label class="layer-checkbox">
              <input 
                type="checkbox" 
                v-model="layer.visible" 
                @change="toggleLayer(layer)"
              />
              <span class="checkbox-custom"></span>
              <span class="layer-name">{{ layer.name }}</span>
            </label>
            <span class="opacity-value">{{ layer.opacity }}%</span>
          </div>
          <div v-if="layer.visible" class="opacity-control">
            <input 
              v-model="layer.opacity" 
              type="range" 
              :min="0" 
              :max="100"
              class="opacity-slider"
              @input="updateLayerOpacity(layer)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 测量工具 -->
    <div class="tools-section">
      <div class="section-title">测量工具</div>
      <div class="tool-buttons">
        <button 
          :class="['tool-btn', { active: activeTool === 'distance' }]"
          @click="setActiveTool('distance')"
        >
          <svg viewBox="0 0 24 24" class="tool-icon">
            <path fill="currentColor" d="M3 17h18v2H3zm2.5-5L12 5.5 18.5 12H3z"/>
          </svg>
          距离
        </button>
        <button 
          :class="['tool-btn', { active: activeTool === 'area' }]"
          @click="setActiveTool('area')"
        >
          <svg viewBox="0 0 24 24" class="tool-icon">
            <path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
          </svg>
          面积
        </button>
        <button class="tool-btn clear-btn" @click="clearMeasurements">
          <svg viewBox="0 0 24 24" class="tool-icon">
            <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
          </svg>
          清除
        </button>
      </div>
      
      <div class="measurement-result" v-if="measurementResult">
        <div class="result-display">
          <span class="result-type">{{ measurementResult.type }}</span>
          <span class="result-value">{{ measurementResult.value }}</span>
        </div>
      </div>
    </div>

    <!-- 坐标系统 -->
    <div class="coord-section">
      <div class="section-title">坐标系统</div>
      <select v-model="selectedCoordSystem" class="coord-select" @change="changeCoordSystem">
        <option value="wgs84">WGS84</option>
        <option value="gcj02">GCJ02</option>
        <option value="bd09">BD09</option>
        <option value="utm">UTM</option>
      </select>
    </div>

    <!-- 同步状态 -->
    <div class="sync-section">
      <div class="sync-control">
        <label class="sync-checkbox">
          <input type="checkbox" v-model="syncEnabled" @change="toggleSync" />
          <span class="checkbox-custom"></span>
          <span class="sync-label">视图同步</span>
        </label>
        <div :class="['sync-status', { active: syncEnabled }]">
          <div class="status-dot"></div>
          <span class="status-text">{{ syncEnabled ? '已同步' : '未同步' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

// Props
const props = defineProps({
  currentView: {
    type: Object,
    default: () => ({ lat: 39.9, lng: 116.4, zoom: 8 })
  },
  zoomLevel: {
    type: Number,
    default: 8
  }
})

// Emits
const emit = defineEmits(['viewChange', 'zoomChange', 'layerToggle'])

// 响应式数据
const currentZoom = ref(props.zoomLevel)
const activeTool = ref('')
const selectedCoordSystem = ref('wgs84')
const syncEnabled = ref(true)

// 视图预设
const viewPresets = ref([
  { name: '北京', lat: 39.9042, lng: 116.4074, zoom: 10 },
  { name: '上海', lat: 31.2304, lng: 121.4737, zoom: 10 },
  { name: '广州', lat: 23.1291, lng: 113.2644, zoom: 10 },
  { name: '深圳', lat: 22.5431, lng: 114.0579, zoom: 10 },
  { name: '全国', lat: 35.0, lng: 104.0, zoom: 4 }
])

// 图层管理
const layers = ref([
  { id: 'base', name: '底图', visible: true, opacity: 100 },
  { id: 'terrain', name: '地形', visible: false, opacity: 80 },
  { id: 'satellite', name: '卫星', visible: false, opacity: 90 },
  { id: 'traffic', name: '交通', visible: true, opacity: 70 },
  { id: 'weather', name: '天气', visible: false, opacity: 60 },
  { id: 'boundaries', name: '边界', visible: true, opacity: 50 }
])

// 测量结果
const measurementResult = ref(null)

// 监听缩放级别变化
watch(() => props.zoomLevel, (newZoom) => {
  currentZoom.value = newZoom
})

// 缩放控制
const zoomIn = () => {
  const newZoom = Math.min(20, currentZoom.value + 1)
  currentZoom.value = newZoom
  emit('zoomChange', newZoom)
}

const zoomOut = () => {
  const newZoom = Math.max(1, currentZoom.value - 1)
  currentZoom.value = newZoom
  emit('zoomChange', newZoom)
}

const handleZoomChange = (event) => {
  const value = parseInt(event.target.value)
  emit('zoomChange', value)
}

// 跳转到预设视图
const jumpToPreset = (preset) => {
  emit('viewChange', {
    lat: preset.lat,
    lng: preset.lng,
    zoom: preset.zoom
  })
  currentZoom.value = preset.zoom
  ElMessage.success(`已跳转到${preset.name}`)
}

// 图层控制
const toggleLayer = (layer) => {
  emit('layerToggle', {
    id: layer.id,
    visible: layer.visible,
    opacity: layer.opacity
  })
  ElMessage.info(`${layer.name}图层已${layer.visible ? '开启' : '关闭'}`)
}

const updateLayerOpacity = (layer) => {
  emit('layerToggle', {
    id: layer.id,
    visible: layer.visible,
    opacity: layer.opacity
  })
}

// 测量工具
const setActiveTool = (tool) => {
  if (activeTool.value === tool) {
    activeTool.value = ''
  } else {
    activeTool.value = tool
  }
  
  // 模拟测量结果
  if (tool === 'distance') {
    measurementResult.value = {
      type: '距离',
      value: '15.6 km'
    }
  } else if (tool === 'area') {
    measurementResult.value = {
      type: '面积',
      value: '245.8 km²'
    }
  }
  
  ElMessage.info(`${tool === 'distance' ? '距离' : '面积'}测量工具已${activeTool.value ? '激活' : '关闭'}`)
}

const clearMeasurements = () => {
  activeTool.value = ''
  measurementResult.value = null
  ElMessage.success('测量结果已清除')
}

// 坐标系统切换
const changeCoordSystem = () => {
  const systemNames = {
    wgs84: 'WGS84',
    gcj02: 'GCJ02',
    bd09: 'BD09',
    utm: 'UTM'
  }
  ElMessage.info(`坐标系统: ${systemNames[selectedCoordSystem.value]}`)
}

// 同步开关
const toggleSync = () => {
  ElMessage.info(`视图同步已${syncEnabled.value ? '开启' : '关闭'}`)
}
</script>

<style scoped>
.map-control-panel {
  height: 100%;
  padding: 2vh 1.5vw;
  background: linear-gradient(135deg, #0a0f1b 0%, #1a2332 100%);
  border-radius: 0.8vh;
  border: 1px solid rgba(0, 212, 255, 0.2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

/* 滚动条样式 */
.map-control-panel::-webkit-scrollbar {
  width: 0.3vw;
}

.map-control-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.15vw;
}

.map-control-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.3);
  border-radius: 0.15vw;
}

.map-control-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.5);
}

/* 位置信息 */
.position-info {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 0.5vh;
  padding: 1.5vh 1vw;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vh;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3vh;
}

.info-label {
  font-size: 0.7rem;
  color: #8591a3;
}

.info-value {
  font-size: 0.9rem;
  color: #00d4ff;
  font-weight: 600;
}

/* 节标题 */
.section-title {
  font-size: 0.9rem;
  color: #00d4ff;
  font-weight: 600;
  margin-bottom: 1vh;
  padding-bottom: 0.5vh;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

/* 缩放控制 */
.zoom-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5vh;
  padding: 1.5vh 1vw;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.zoom-btn {
  width: 2.5vh;
  height: 2.5vh;
  background: rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 0.3vh;
  color: #00d4ff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.zoom-btn:hover {
  background: rgba(0, 212, 255, 0.3);
  transform: translateY(-0.1vh);
}

.zoom-slider {
  flex: 1;
  height: 0.3vh;
  background: rgba(0, 212, 255, 0.2);
  border-radius: 0.15vh;
  outline: none;
  -webkit-appearance: none;
}

.zoom-slider::-webkit-slider-thumb {
  width: 1.2vh;
  height: 1.2vh;
  background: #00d4ff;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  box-shadow: 0 0 0.5vh rgba(0, 212, 255, 0.3);
}

.zoom-value {
  font-size: 0.8rem;
  color: #00d4ff;
  font-weight: 600;
  min-width: 1.5vw;
  text-align: center;
}

/* 快速定位 */
.locations-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5vh;
  padding: 1.5vh 1vw;
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5vh;
}

.location-btn {
  padding: 0.8vh 1vw;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 0.4vh;
  color: #bfcbd9;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.location-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
  transform: translateY(-0.1vh);
}

/* 图层管理 */
.layers-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5vh;
  padding: 1.5vh 1vw;
}

.layer-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.layer-item {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 0.4vh;
  padding: 1vh;
}

.layer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8vh;
}

.layer-checkbox {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  cursor: pointer;
  flex: 1;
}

.layer-checkbox input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 1.2vh;
  height: 1.2vh;
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 0.2vh;
  background: transparent;
  position: relative;
  transition: all 0.2s ease;
}

.layer-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background: #00d4ff;
  border-color: #00d4ff;
}

.layer-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #0a0f1b;
  font-size: 0.7rem;
  font-weight: bold;
}

.layer-name {
  font-size: 0.8rem;
  color: #bfcbd9;
}

.opacity-value {
  font-size: 0.7rem;
  color: #8591a3;
  min-width: 2vw;
  text-align: right;
}

.opacity-control {
  margin-top: 0.5vh;
}

.opacity-slider {
  width: 100%;
  height: 0.2vh;
  background: rgba(0, 212, 255, 0.2);
  border-radius: 0.1vh;
  outline: none;
  -webkit-appearance: none;
}

.opacity-slider::-webkit-slider-thumb {
  width: 1vh;
  height: 1vh;
  background: #00d4ff;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
}

/* 测量工具 */
.tools-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5vh;
  padding: 1.5vh 1vw;
}

.tool-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5vh;
  margin-bottom: 1vh;
}

.tool-btn {
  padding: 1vh 0.8vw;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 0.4vh;
  color: #bfcbd9;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3vh;
  transition: all 0.2s ease;
}

.tool-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
  transform: translateY(-0.1vh);
}

.tool-btn.active {
  background: rgba(0, 212, 255, 0.3);
  border-color: #00d4ff;
  color: #00d4ff;
  box-shadow: 0 0 1vh rgba(0, 212, 255, 0.3);
}

.tool-btn.clear-btn {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
}

.tool-icon {
  width: 1.5vh;
  height: 1.5vh;
}

.measurement-result {
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 0.4vh;
  padding: 1vh;
  text-align: center;
}

.result-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-type {
  font-size: 0.8rem;
  color: #8591a3;
}

.result-value {
  font-size: 0.9rem;
  color: #00ff88;
  font-weight: 600;
}

/* 坐标系统 */
.coord-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5vh;
  padding: 1.5vh 1vw;
}

.coord-select {
  width: 100%;
  padding: 0.8vh 1vw;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 0.4vh;
  color: #bfcbd9;
  font-size: 0.8rem;
}

.coord-select:focus {
  outline: none;
  border-color: #00d4ff;
  box-shadow: 0 0 0 0.1vh rgba(0, 212, 255, 0.3);
}

/* 同步状态 */
.sync-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5vh;
  padding: 1.5vh 1vw;
}

.sync-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sync-checkbox {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  cursor: pointer;
}

.sync-checkbox input[type="checkbox"] {
  display: none;
}

.sync-label {
  font-size: 0.9rem;
  color: #bfcbd9;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8rem;
  color: #8591a3;
  transition: color 0.3s ease;
}

.sync-status.active {
  color: #00ff88;
}

.status-dot {
  width: 0.6vh;
  height: 0.6vh;
  border-radius: 50%;
  background: #8591a3;
  transition: background 0.3s ease;
}

.sync-status.active .status-dot {
  background: #00ff88;
  box-shadow: 0 0 0.5vh rgba(0, 255, 136, 0.5);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 0.8vh;
  }
  
  .location-grid {
    grid-template-columns: 1fr;
  }
  
  .tool-buttons {
    grid-template-columns: 1fr;
  }
  
  .tool-btn.clear-btn {
    grid-column: 1;
  }
}
</style>